<template>
	<div style="width: 95vw;height: 90vh;">
		<Tinyflow
			ref="tinyflowRef"
			:className="'custom-tinyflow'"
			:style="{ height: '100%', border: '1px solid #ccc' }"
			:data="initialData"
		/>
		<button @click="fetchData">获取流程数据</button>
	</div>
</template>

<script setup lang="ts">
import Tinyflow from '../../flow/Tinyflow.vue';
import { ref } from 'vue';

const tinyflowRef = ref<InstanceType<typeof Tinyflow> | null>(null);
const initialData = ref({
	"nodes": [
		{
			"id": "node_zQ7zeFMvsvA2j5AN",
			"position": {
				"x": 585.8435085614577,
				"y": 196.52832492869626
			},
			"data": {
				"title": "大模型",
				"description": "使用大模型处理问题",
				"systemPrompt": "",
				"userPrompt": ""
			},
			"type": "llmNode",
			"selected": true,
			"measured": {
				"width": 305,
				"height": 121
			},
			"dragging": false
		},
		{
			"id": "node_H10AF5d63BvSfJzZ",
			"position": {
				"x": 106.58234872469211,
				"y": 15.665055962417853
			},
			"data": {
				"title": "知识库",
				"description": "通过知识库获取内容",
				"systemPrompt": "",
				"userPrompt": "",
				"outputDefs": [
					{
						"name": "documents",
						"dataType": "Array",
						"nameDisabled": true,
						"dataTypeDisabled": true,
						"addChildDisabled": true,
						"children": [
							{
								"name": "title",
								"dataType": "String",
								"nameDisabled": true,
								"dataTypeDisabled": true,
								"id": "dgwvyK39ys5OZWID"
							},
							{
								"name": "content",
								"dataType": "String",
								"nameDisabled": true,
								"dataTypeDisabled": true,
								"id": "UETRPkaSMe1QbXKj"
							},
							{
								"name": "documentId",
								"dataType": "Number",
								"nameDisabled": true,
								"dataTypeDisabled": true,
								"id": "dyY5B1Zm6jmcrtU0"
							},
							{
								"name": "knowledgeId",
								"dataType": "Number",
								"nameDisabled": true,
								"dataTypeDisabled": true,
								"id": "CQ2EuH3myMv9ExpK"
							}
						],
						"id": "CvLEbQTWKZ1yhV8R"
					}
				]
			},
			"type": "knowledgeNode",
			"selected": false,
			"measured": {
				"width": 305,
				"height": 121
			},
			"dragging": false
		}
	],
	"edges": [
		{
			"markerEnd": {
				"type": "arrowclosed",
				"width": 20,
				"height": 20
			},
			"source": "node_H10AF5d63BvSfJzZ",
			"target": "node_zQ7zeFMvsvA2j5AN",
			"id": "xy-edge__node_H10AF5d63BvSfJzZ-node_zQ7zeFMvsvA2j5AN",
			"selected": false
		}
	],
	"viewport": {
		"x": 226.74624767788913,
		"y": 160.90033520722372,
		"zoom": 0.7578582832551992
	}
});

const fetchData = () => {
	if (tinyflowRef.value) {
		const data = tinyflowRef.value.getData();
		console.log('流程数据:', data);
	}
};
</script>
